<template>
  <div>
    <h2>Counter: {{ counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'

export default {
  computed: {
    // 根store写法：
    // counter() {
    //   return this.$store.state.counter;
    // }
    // 展开写法：
    // ...mapState(['counter'])
    // 模块化store写法：
    // counter() {
    //   return this.$store.state.demo.counter;
    // }
    // 展开写法：
    ...mapState('demo', ['counter']) // 注意这里加了模块路径 'demo'
  },
  methods: {
    // 根store写法：
    // increment() {
    //   this.$store.commit('increment');
    // }
    // 展开写法：
    // ...mapMutations(['increment'])
    // 模块化store写法：
    // increment() {
    //   this.$store.commit('demo/increment');
    // }
    ...mapMutations('demo', ['increment']) // 同样加了模块路径
  }
}

</script>
